<template>
  <div class="bg">
    <div class="container">
      <div class="service-features">
        <div class="feature-item" v-for="(feature, index) in features" :key="index">
          <div class="feature-icon">
            <i :class="feature.icon"></i>
          </div>
          <div class="feature-content">
            <h3 class="feature-title">{{ feature.title }}</h3>
            <p class="feature-description">{{ feature.description }}</p>
            <p class="feature-sub-description">{{ feature.subDescription }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ServiceFeatures',
  data() {
    return {
      features: [
        {
          icon: 'rocket-icon',
          title: '免费送货',
          description: '所有来自您的订单',
          subDescription: '价格超过 90.00 元则回免费送货'
        },
        {
          icon: 'reload-icon',
          title: '资金担保',
          description: '15 天退款保证',
          subDescription: '无条件退退款!'
        },
        {
          icon: 'lock-icon',
          title: '24小时在线支持',
          description: '我们将这里为您提供支持',
          subDescription: '现在就去购物吧！'
        }
      ]
    }
  }
}
</script>

<style scoped>
.service-features {
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  background-color: #8AB660;
  padding: 40px 20px;
  color: white;
}

.bg {
  background-color: #8AB660;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  padding: 0 20px;
}

.feature-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
}

/* 火箭图标 */
.rocket-icon::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background: white;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8zm-2-6h4v2h-4v-2zm-2-4h8v2h-8V6z' fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
  mask-size: contain;
}

/* 重新加载图标 */
.reload-icon::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background: white;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

/* 锁图标 */
.lock-icon::before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  background: white;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

.feature-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.feature-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
}

.feature-description {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.9;
}

.feature-sub-description {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.9;
}

@media (max-width: 1024px) {
  .service-features {
    flex-direction: column;
    gap: 30px;
    padding: 30px 15px;
  }

  .feature-item {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .feature-item {
    flex-direction: column;
    text-align: center;
    padding: 0 10px;
  }

  .feature-icon {
    margin-bottom: 10px;
  }
}
</style>